<!--
 * @Autor: dingxiaolin
 * @Date: 2021-07-21 16:23:40
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-25 20:39:45
-->
<template>
    <div>
        <a-list itemLayout="horizontal">
            <a-list-item>
                <a-list-item-meta>
                    <template #title>
                        <a>风格配色</a>
                    </template>
                    <template #description>
                        <a>整体风格配色设置</a>
                    </template>
                </a-list-item-meta>
                <template #actions>
                    <a-switch
                        checked-children="暗色"
                        un-checked-children="亮色"
                        :checked="$store.state.app.theme === 'dark' ? true : false"
                        @change="change"
                    ></a-switch>
                </template>
            </a-list-item>
        </a-list>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
export default defineComponent({
    name: 'customSettings',
    components: {},
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            checked: false
        })
        onMounted(() => {})
        function change(v) {
            store.commit('app/toggleTheme', v ? 'dark' : 'light')
        }
        return {
            ...toRefs(state),
            change
        }
    }
})
</script>

<style lang='scss' scoped>
</style>
